<template>
  <div class="sh-dialog" v-if="this_show">
    <sh-iscroll ref="sh-dialog-scroll" class="sh-dialog-scroll"
                @tap.stop="(this_type!='confirm' && this_type!='alert') && close()"
                :options="{mouseWheel: true,scrollbars: true}">
      <div class="sh-dialog-main sh-dialog-alert"
           :class="{show:this_show,alert_notice:this_alert_type==='NOTICE'}"
           v-if="this_type=='alert'">
        <div class="sh-dialog-title" v-if="this_title">
          {{this_title}}
        </div>
        <div class="sh-dialog-content" v-html="this_content">
        </div>
        <div class="sh-dialog-opera">
          <div class="sh-dialog-btn"
               @tap.stop="bindOk">
            {{this_ok_text || '确定'}}
          </div>
        </div>
      </div>

      <div class="sh-dialog-main sh-dialog-confirm" :class="{show:this_show}" v-if="this_type=='confirm'">
        <div class="sh-dialog-title" v-if="this_title">
          {{this_title}}
        </div>
        <div class="sh-dialog-content" v-html="this_content">
        </div>
        <div class="sh-dialog-opera">
          <div class="sh-dialog-btn"
               @tap.self="bindCancel()">
            {{this_cancel_text || '取消'}}
          </div>
          <div class="sh-dialog-btn"
               @tap.self="bindOk()">
            {{this_ok_text || '确定'}}
          </div>
        </div>
      </div>

      <div class="sh-dialog-main sh-dialog-common" :class="{show:this_show}"
           v-if="this_type!='confirm' && this_type!='alert'" @tap.stop="">
        <slot></slot>
      </div>
      <!--<div class="sh-mask"
           ></div>-->
    </sh-iscroll>
  </div>
</template>
<style lang="scss">
  .sh-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*display: -webkit-flex;*/
    /*-webkit-justify-content: center;*/
    /*-webkit-align-items: center;*/
    z-index: 10000;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7);
  }

  .sh-dialog-scroll {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10001;
    .sh-iscroll-wrapper {
      min-height: 100%;
      overflow: hidden;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      -webkit-flex-direction: column;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;
    }
    .sh-scroll-main {
      min-height: 100%;
    }

  }

  /*通用*/
  /*.sh-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .7;
    z-index: 10000;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }*/

  .sh-dialog-main {
    text-align: center;
    position: relative;
    z-index: 10001;
    background: #fff;
    width: 80%;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
    word-wrap: break-word;
    margin: 0 auto;
    margin-top: 10%;
    margin-bottom: 30%;
    /*animation: hideAni 0.3s;*/
    overflow: hidden;
    min-height: 1rem;
  }

  .sh-dialog-main.alert_notice > .sh-dialog-content {
    text-align: left;
  }

  .sh-dialog-main.alert_notice .sh-dialog-opera {
    border-top: 0;
    padding: 0 1rem 0.75rem;
  }

  .sh-dialog-main.alert_notice .sh-dialog-opera .sh-dialog-btn {
    background: #f1cf92;
    color: #333;
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    border-radius: 5rem;
  }

  .sh-dialog-main.show {
    /*animation: showAni 0.3s;*/
  }

  .sh-dialog-main.sh-dialog-common {
    background: transparent;
    max-width: none;
    min-width: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

  }

  .sh-dialog-title {
    padding: 0.75rem;
    padding-bottom: 0;
    text-align: center;
    font-size: 1rem;
    /*font-weight: bold;*/
  }

  .sh-dialog-content {
    padding: 1.25rem 1rem;
  }

  .sh-dialog-opera {
    text-align: center;
    border-top: 1px solid #cccccc;
    color: #1c80f0;
    display: flex;
    display: -webkit-flex;
  }

  .sh-dialog-btn {
    flex: 1;
    -webkit-flex: 1;
    padding: 0.75rem;
  }

  .sh-dialog-btn:active {
    background: #ccc;
  }

  .sh-dialog-btn + .sh-dialog-btn {
    border-left: 1px solid #cccccc;
  }

  @keyframes showAni {
    0% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes hideAni {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.5);
    }
  }

  @-webkit-keyframes showAni {
    0% {
      -webkit-transform: scale(0.95);
    }
    100% {
      -webkit-transform: scale(1);
    }
  }

  @-webkit-keyframes hideAni {
    0% {
      -webkit-transform: scale(1);
    }
    100% {
      -webkit-transform: scale(0.5);
    }
  }
</style>
<script>

  import ShIscroll from './sh-iscroll.vue'

  export default {
    name: 'sh-dialog',
    components: {
      "sh-iscroll": ShIscroll,
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      /*title:String,
      type:String,
      alert_ok:String,
      show:{
          type:Boolean,
          default:false,
      },
      confirm_cancel:String,
      confirm_ok:String,*/
    },
    data() {
      return {
        is_moving: false,
        this_title: '',
        this_content: '',
        this_type: '',
        this_ok_text: '',
        this_cancel_text: '',
        this_show: false,
        this_alert_type: '',//NOTICE：通知样式
      }
    },
    update: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {
      this.init();
    },
    methods: {
      start() {
        this.is_moving = false;
      },
      move() {
        this.is_moving = true;
      },
      init() {
        this.this_type = '';
        this.this_title = '';
        this.this_content = '';
        this.this_ok_text = '';
        this.this_cancel_text = '';
        this.this_show = false;
        this.this_alert_type = '';
      },
      toShow() {
        document.querySelector('#app').appendChild(this.$el);
        this.this_show = true;
//        pageScroll.lock();
//        pageScroll.unlock(this.$el);
      },
      bindOk() {
        this.ok && this.ok(true);
        this.close();
      },
      bindCancel() {
        this.cancel && this.cancel(false);
        this.close();
      },
      close(isCommon) {
        this.init();
        if (isCommon) {
          document.querySelector('#app').removeChild(this.$el);
        } else {
          this.$emit('close');
        }
//        pageScroll.unlock();
        this.$emit('update:show', false);
      },
    },
    watch: {
      show(val) {
        this.this_show = val;
        this.$nextTick(() => {
          val && this.$refs["sh-dialog-scroll"].refresh();
        })

      }
    },
  };
</script>
